<template>
  <el-container>
    <el-aside
      id="left"
      :style="isMini ? 'width: 0px;' : menu.isShrink ? 'width: 65px' : 'width: 200px'"
    >
      <div class="mini_bg" v-show="isMini && !menu.isShrink" @click="menu.isShrink = true"></div>
      <el-menu
        :style="isMini && !menu.isShrink ? 'position: absolute; width: 200px; height: '+windowHeight+'px; overflow:auto; z-index: 9999' : ''"
        :collapse="menu.isShrink"
        router
        :default-openeds="menu.open"
        :default-active="path"
        unique-opened
      >
        <el-menu-item @click="tab.tabAction = '/back/index'">
          <img src="~@/assets/gostockgo_logo.png" width="20px" height="20px" alt="logo" />
          <span slot="title">华美医药管理系统</span>
        </el-menu-item>
        <el-menu-item index="/back/index">
          <span slot="title">首页</span>
          <i class="iconfont">&#xecb0;</i>
        </el-menu-item>
        <el-submenu v-for="(item, index) in menu.menuList" :key="index" :index="index.toString()">
          <template slot="title">
            <i class="iconfont" v-html="item.icon"></i>
            <span>{{ item.modName }}</span>
          </template>

          <el-menu-item v-for="(temp, number) in item.children" :key="number" :index="temp.url">
            <i class="iconfont" v-html="item.icon"></i>
            <span>{{ temp.modName }}</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="height: 90px">
        <div class="header_top">
          <div style="margin: 0px 10px">
            <i
              style="line-height: 50px; font-size: 30px; color: rgba(0, 0, 0, .6)"
              :class="menu.isShrink ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
              @click="menu.isShrink = !menu.isShrink"
            ></i>
          </div>
          <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/back/index' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>活动管理</el-breadcrumb-item>
              <el-breadcrumb-item>活动列表</el-breadcrumb-item>
              <el-breadcrumb-item>活动详情</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div>
            <ul
              class="header_menu el-menu--horizontal el-menu"
              v-show="!isMini"
              :collapse-transition="false"
              mode="horizontal"
            >
              <li class="el-menu-item">
                <span>
                  <i class="el-icon-search" @click="isSearch = !isSearch"></i>
                  <el-autocomplete
                    v-model="search"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="Search"
                    @select="handleSelect"
                    size="mini"
                    id="search"
                  ></el-autocomplete>
                </span>
              </li>
              <li class="el-menu-item">
                <!-- <svg
                  style="width: 20px; height: 20px"
                  class="icon"
                  aria-hidden="true"
                  @click="isFullScreen = !isFullScreen"
                >
                  <use :xlink:href="isFullScreen ? '#icon-huanyuanhuabu' : '#icon-quanping'" />
                </svg>-->
                <i
                  class="iconfont"
                  style="font-size: 18px"
                  @click="isFullScreen = !isFullScreen"
                  v-html="isFullScreen ? '&#xec15;' : '&#xec16;'"
                >;</i>
              </li>
            </ul>
            <el-dropdown>
              <el-image
                style="width: 40px; height: 40px; margin: 5px 20px; border-radius: 5px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              ></el-image>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div style="height: 40px" class="tab">
          <el-tabs @tab-remove="removeTab" v-model="tab.tabAction" type="card">
            <el-tab-pane label="首页" name="/back/index"></el-tab-pane>
            <el-tab-pane
              v-for="(item, index) in tab.tableList"
              :key="index"
              :label="item.title"
              :name="item.url"
              closable
            >{{item.title}}</el-tab-pane>
          </el-tabs>
        </div>
      </el-header>
      <el-main>
        <el-card>
          <router-view />
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "back",
  data() {
    return {
      menu: {
        menuList: [],
        isShrink: false,
        open: []
      },
      isMini: false,
      search: "",
      isSearch: false,
      isFullScreen: false,
      tab: {
        tableList: [],
        tabAction: "/back/index"
      },
      menuList: []
    };
  },
  methods: {
    removeTab(targetName) {
      let tabs = this.tab.tableList;
      let activeName = this.tab.tabAction;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.url === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];

            if (nextTab) {
              this.tab.tabAction = nextTab.url;
            } else {
              this.tab.tabAction = "/back/index";
            }
          }
        });
      }
      this.tab.tableList = this.tab.tableList.filter(
        item => item.url != targetName
      );
    },
    windowOnSize() {
      if (window.innerWidth <= 1000) {
        this.menu.isShrink = true;
        this.isMini = true;
      } else {
        if (this.isMini === true) {
          this.isMini = false;
        }
      }
    },
    async getModule() {},
    windowHeight() {
      return window.innerHeight;
    },
    querySearchAsync(val, callback) {
      callback(
        val === ""
          ? this.searchList
          : this.searchList.filter(item => item.value.indexOf(val) > -1)
      );
    },
    handleSelect(obj) {
      this.tabAction = obj.url;
    }
  },
  computed: {
    searchList() {
      let list = [];
      for (let i = 0; i < this.menu.menuList.length; i++) {
        let menu = this.menu.menuList[i];
        for (let j = 0; j < menu.children.length; j++) {
          list.push({
            value: menu.modName + ">" + menu.children[j].modName,
            url: menu.children[j].url
          });
        }
      }
      return list;
    },
    path() {
      const path = this.$route.path;
      this.tab.tabAction = path;
      return path;
    },
    menuAction() {
      if (this.path === "/back/ index") return;
      for (let i = 0; i < this.menu.menuList.length; i++) {
        for (let j = 0; j < this.menu.menuList[i].children.length; j++) {
          if (this.menu.menuList[i].children[j].url === this.path) {
            this.menu.open = [i.toString()];
          }
        }
      }
    }
  },
  watch: {
    isSearch(to) {
      const searchDom = document.getElementById("search");
      if (to) {
        searchDom.style.transition = "all .4s";
        searchDom.style.width = "200px";
        searchDom.style.padding = "0px 5px";
      } else {
        searchDom.style.width = "0px";
        searchDom.style.padding = "0px";
      }
    },
    isFullScreen(to) {
      if (to) {
        const element = document.documentElement;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    },
    "tab.tabAction"(to) {
      const list = this.tab.tableList.filter(item => item.url === to);
      if (list.length === 0 && to !== "/back/index") {
        const time = setInterval(() => {
          if (this.menu.menuList.length !== 0) {
            const menu = this.menu.menuList.filter(
              item => item.children.filter(temp => temp.url === to).length !== 0
            )[0];
            const temp = menu.children.filter(item => item.url === to)[0];
            this.tab.tableList.push({ title: temp.modName, url: temp.url });
            clearInterval(time);
          }
        }, 10);
      }
      if (this.path !== to) {
        this.$router.push(to);
      }
    }
  },
  async mounted() {
    window.onresize = this.windowOnSize;
    this.windowOnSize();
    await this.getModule();
    const searchDom = document.getElementById("search");
    searchDom.style = `border-left: 0px;
                                border-right: 0px;
                                border-top: 0px;
                                 border-button:1px solid rgba(0, 0, 0, .5);
                                  border-color: rgba(0, 0, 0, .5);
                                  border-radius:0; padding: 0px;
                                  width: 0px;`;
    document.getElementById("left").style.transition = "width .28s";
  }
};
</script>

<style scoped>
.el-container {
  height: 100vh;
}

.el-menu {
  height: 100%;
}

.el-header,
.el-main {
  padding: 0px;
  margin: 0px;
}

.header_top {
  height: 50px;
  overflow: hidden;
  border-bottom: 1px solid rgba(151, 148, 148, 0.2);
  box-shadow: 3px 10px 100px 1px rgba(0, 0, 0, 0.15);
  position: relative;
  background-color: rgba(255, 255, 255, 10);
}

.header_top > div {
  display: inline-block;
  height: 100%;
  float: left;
}

.header_top > div:nth-child(3) {
  float: right;
}

.el-breadcrumb {
  line-height: 50px;
}

.header_menu,
.el-dropdown {
  height: 50px;
  display: inline-block;
}

.header_menu > li {
  padding: 0 5px;
  height: 50px;
  line-height: 50px;
}

.photo {
  float: right;
}

.mini_bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100vh;
  position: absolute;
  z-index: 100;
}

.el-menu .iconfont,
img {
  margin: 0px 5px;
}

.tab {
  box-shadow: 3px 10px 200px 1px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
  z-index: 9;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.el-main {
  padding: 15px;
}
</style>